<template>
	<view class="package">
		<view class="acea-row row-around catenav">
			<view class="item" :class="cindex==0?'on':''" @click="cateClick(0)">全部</view>
			<view class="item" :class="cindex==1?'on':''" @click="cateClick(1)">服务中</view>
			<view class="item" :class="cindex==2?'on':''" @click="cateClick(2)">服务完成</view>
		</view>
		<view class="list">
			<view class="item acea-row row-middle" v-for="(item,index) in list" :key="index" @click="urlClick(item)">
				<view class="pictrue">
					<image class="imgwh" :src="item.shopData.images[0]" mode=""></image>
				</view>
				<view class="ml30" style="flex: 1;">
					<view class="color333 fs-36 bold line2">{{ item.shopData.title }}</view>
					<view class="acea-row row-between-wrapper mt20">
						<view class="fs-30 themecolor">{{ item.statusName }}</view>
						<view class="btn">查看详情</view>
					</view>
				</view>
			</view>
			<view class='loadingicon acea-row row-center-wrapper' v-if="list.length>0">
				<text class='loading iconfont icon-jiazai' :hidden='loading==false'></text>{{loadTitle}}
			</view>
		</view>
		
		<block v-if="list.length==0">
			<view class="kong">
				<view class="acea-row row-middle row-center none-t">
					<text class="fs-32 color666">暂无更多数据~</text>
				</view>
			</view>
		</block>
		
	</view>
</template>

<script>
	import{
		orderList
	} from '@/api/order.js'
	export default {
		data() {
			return {
				cindex:0,
				page:1,
				limit:10,
				list:[],
				loadend: false,
				loading: false,
				loadTitle: this.$t(`加载更多`),
			};
		},
		onLoad() {
			this.getlist();
		},
		methods:{
			empty(){
				this.page = 1;
				this.loadend = false;
				this.loading = false;
				this.list = [];
			},
			getlist(){
				let that = this;
				if (that.loadend) return;
				if (that.loading) return;
				that.loading = true;
				that.loadTitle = '';
				orderList({ page:that.page,limit:that.limit,type:that.cindex }).then(res=>{
					let list = res.data.data;
					let arr = that.$util.SplitArray(list, that.list);
					let loadend = list.length < that.limit;
					that.loadend = loadend;
					that.loading = false;
					that.loadTitle = loadend ? that.$t(`没有更多内容啦~`) : that.$t(`加载更多`);
					that.$set(that, 'list', arr);
					that.$set(that, 'page', that.page + 1);
				}).catch(err=>{
					that.loading = false;
					that.loadTitle = that.$t(`加载更多`);
				})
			},
			cateClick(val){
				this.cindex = val;
				this.empty();
				this.getlist();
			},
			urlClick(item){
				uni.navigateTo({
					url: '/pages/package/details?id=' + item.id
				})
			}
		},
		onReachBottom() {
			this.getlist();
		}
	}
</script>

<style lang="scss">
	.package{
		
		.catenav{
			background-color: #ffffff;
			padding: 30rpx 0 10rpx 0;
			position: fixed;
			top: 0;
			left: 0;
			right: 0;
			
			.item{
				// width: 20%;
				text-align: center;
				padding-bottom: 20rpx;
				
				&.on{
					color: #FD7D36;
					border-bottom: 1rpx solid #FD7D36;
				}
			}
		}
		
		.list{
			margin-top: 125rpx;
			
			.item{
				width: 100%;
				height: 240rpx;
				background-color: #ffffff;
				margin-bottom: 30rpx;
				padding: 0 40rpx;
				
				.pictrue{
					width: 150rpx;
					height: 150rpx;
					border-radius: 10rpx;
					overflow: hidden;
				}
				.btn{
					width: 220rpx;
					height: 70rpx;
					border-radius: 70rpx;
					background: rgba(253, 125, 54, 0.2);
					text-align: center;
					line-height: 70rpx;
					color: #FD7D36;
					font-size: 28rpx;
				}
			}
		}
		
		.kong{
			width: 520rpx;
			height: 520rpx;
			background-image: url('https://yijiaan.oss-cn-hangzhou.aliyuncs.com/pic/none-icon.png');
			background-size: 100% 100%;
			margin: 30rpx auto;
			position: relative;
			
			.none-t{
				width: 100%;
				color: #888888;
				font-size: 34rpx;
				position: absolute;
				bottom: -20rpx;
				left: 0;
				right: 0;
			}
		}
		
		
	}
</style>
